<template>
  <Icon type="md-person-add" @click="value = true" size="40"/>
  <CountUp :end="requestList.length" :duration="3" :options="options" ref="count" v-font="20" />

  <Scroll :on-reach-bottom="handleReachBottom">
    <Card dis-hover v-for="(item, friIndex) in friendList" :key="friIndex" style="margin: 32px 0">
      <Row>
        <Col span="15">
          <Card :bordered="tu=false">
            <Row>
              <Col>
                <h2>{{ item.friendName }}</h2>
              </Col>
            </Row>
            <Row>
              <Col>
                ID:{{item.friendId}}
              </Col>
            </Row>
          </Card>
        </Col>
        <Col span="9">
          <Card :bordered="tu=false" style="height: 100px">
            <Row align="center" style="height: 20px">
              <Col>
                <h4>分组:</h4>
              </Col>
              <Col>
                {{ item.groupName }}
              </Col>
              <Dropdown trigger="click" style="margin-left: 10px">
                <a href="javascript:void(0)">
                  改变分组
                  <Icon type="ios-arrow-down"></Icon>
                </a>
                <template #list>
                  <DropdownMenu>
                    <DropdownItem v-for="(item,groIndex) in groupList"
                                  @click="changeGroup(friIndex,groIndex)">
                      {{ item.groupName }}
                    </DropdownItem>
                  </DropdownMenu>
                </template>
              </Dropdown>
            </Row>
            <Row align="center" style="height: 10px">
              <Button type="error">删除好友</Button>
            </Row>
          </Card>

        </Col>
      </Row>
    </Card>
  </Scroll>
  <Drawer :closable="false" width="640" v-model="value">
    <Card v-for="(item,index) in requestList">
      <template #title>
        {{ item.requestName }}
      </template>
      <p>{{ item.content }}</p><br>
      <Row>
        <Col>
          <Button type="success" @click="agreeRequest(index,item.userId)">同意</Button>
        </Col>
        <Col offset="4">
          <Button type="warning" @click="refuseRequest(index,item.userId)">拒绝</Button>
        </Col>
      </Row>
    </Card>
  </Drawer>
</template>
<script>

import axios from 'axios'
import group from '@/store/group'

export default {
  data() {
    return {
      friendList: [],
      groupList: group.getGroupList(),
      value: false,
      requestList: []
    }
  },
  created() {
    console.log('ss')
    const self = this
    axios({
      method: 'get',
      url: '/friend'
    }).then((result) => {
      for (let i = 1; i < result.data.length; i += 1) {
        self.friendList.push(result.data[i])
      }
    })
    axios({
      method: 'get',
      url: '/request'
    }).then((result) => {
      self.requestList = result.data
    })
  },
  methods: {
    handleReachBottom() {
      return new Promise((resolve) => {
        console.log('yes')
        setTimeout(() => {
          const self = this
          axios({
            method: 'get',
            url: '/friend'
          }).then((result) => {
            console.log(result)
            for (let i = 1; i < result.data.length; i += 1) {
              self.friendList.push(result.data[i])
            }
          })
          resolve()
        }, 1000)
      })
    },
    changeGroup(friIndex, groIndex) {
      const self = this
      this.friendList[friIndex].groupName = this.groupList[groIndex].groupName
      axios({
        method: 'put',
        url: '/friend',
        data: {
          friendId: friIndex,
          originGroupId: groIndex,
          targetGroupId: 0
        }
      }).then((result) => {
        console.log(result)
        self.$Notice.success({
          title: '更改完成'
        })
      })
    },
    agreeRequest(index, requestID) {
      const self = this
      console.log(requestID)
      this.requestList.splice(index, 1)
      axios({
        method: 'put',
        url: `/request/${requestID}`
      }).then((result) => {
        console.log(result)
        self.$Notice.success({
          title: '已添加'
        })
      })
    },
    refuseRequest(index, requestID) {
      const self = this
      console.log(requestID)
      this.requestList.splice(index, 1)
      axios({
        method: 'delete',
        url: `/request/${requestID}`
      }).then((result) => {
        console.log(result)
        self.$Notice.success({
          title: '已拒绝'
        })
      })
    }
  }
}
</script>
